<template>
  <div>
    <!-- 顶部组件 -->
    <header-nav></header-nav>

    <van-index-bar>

      
      <div v-for="(item,index) in rightList" :key="index">
        <van-index-anchor  :index="item.name" />
        <van-cell v-for="value in item.data" :key="value.id">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div class="van-cell-title">
              <van-image
              lazy-load
                width="45"
                height="45"
                :src="value.img1v1Url  || ''"
                alt=""
              />
              <span class="custom-title">{{value.name}}</span>
            </div>
          </template>
        </van-cell>
      </div>
    </van-index-bar>
  </div>
</template>

<script>

import { getArtistlist } from "../api/singer";
import headerNav from "../components/base/headerNav.vue";
export default {
  data() {
    return {
      leftList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"],
      rightList: [],
    };
  },
  components: {
    headerNav,
  },
  methods: {
    ArtistListFun() {
      for (let i = 0; i < this.leftList.length; i++) {
        this.rightList.push({
          name: this.leftList[i],
        });
      }
    },
  },
  created() {
    // 构建对象
    this.ArtistListFun();
    console.log(this.rightList);

    for (let i = 0; i < this.leftList.length; i++) {
      getArtistlist({
        type: 1,
        area: 96,
        limit:10,
        initial: this.leftList[i],
      }).then((data) => {
        let index = this.rightList.findIndex(
          (item) => item.name == this.leftList[i]
        );
         // Vue.set( target, propertyName/index, value )
         //   向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。

        // 不合理写法
        // this.rightList[index].data = data.artists;

        // 合理写法
        this.$set(this.rightList[index],'data',data.artists)
        
      });
    }
  },
};
</script>

<style lang="less">
.van-cell-title {
  display: flex;
  align-items: center;
  span {
    margin-left: 20px;
  }
}
.van-index-anchor {
  background-color: #d9dadb;
}
</style>